<template>
  <el-card class="tableBox">
    <template #header>
      <div class="card-header">
        <span>巡检信息</span>
        <el-button class="button" type="primary">新增信息</el-button>
      </div>
    </template>
    <el-table :data="tableData" border style="width: 100%" v-loading="loading">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="taskCode" label="巡检码" />
      <el-table-column prop="deviceName" label="设备名称" />
      <el-table-column prop="adeviceAddress" label="设备地址" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column label="巡检状态">
        <template #default="props">
          <el-tag class="ml-2" :type="tagMap[props.row.progress]?.type">{{
            tagMap[props.row.progress]?.info
          }}</el-tag>
        </template>
      </el-table-column>
      <!--      <el-table-column fixed="right" label="操作" width="120px">-->
      <!--        <template #default="scope">-->
      <!--          <el-button type="danger" @click.prevent="deleteRow(scope.$index)">-->
      <!--            删除-->
      <!--          </el-button>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>
    <div class="paginationBox">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useSecurityStoreHook } from "@/store/modules/security";

const currentPage = ref(1);
const pageSize = ref(10);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  loadingInfo();
};
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  loadingInfo();
};

// 获取列表信息
let loading = true;
const total = ref(100);
const securityStore = useSecurityStoreHook();
const tableData = ref([]);
async function loadingInfo() {
  await securityStore.getPatrolInfo(currentPage.value, pageSize.value);
  loading = false;
  total.value = securityStore.patrolTotal;
  tableData.value = securityStore.patrolList;
}
loadingInfo();

// 维修单对应状态
const tagMap = {
  0: {
    info: "进行中",
    type: ""
  },
  1: {
    info: "已接单",
    type: "success"
  },
  2: {
    info: "已结束",
    type: "info"
  }
};
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tableBox {
  margin-top: 20px;
}

.paginationBox {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
</style>
